<!-- 页面 -->
<template>
    <div class="you">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card shadow="always" class="box-card kad">
            <div style="margin-top: 15px;">
                <el-input placeholder="请输入内容" v-model="input3" style="width: 300px;" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search" @click="xuan()"></el-button>
                </el-input><el-button @click="dialogFormVisible = true" type="primary">添加用户</el-button>
            </div>

            <template>
                <el-table :data="tableData" border>
                    <el-table-column fixed prop="id" label="#">
                    </el-table-column>
                    <el-table-column prop="username" label="姓名">
                    </el-table-column>
                    <el-table-column prop="mobile" label="电话">
                    </el-table-column>
                    <el-table-column prop="role_name" label="角色">
                    </el-table-column>
                    <el-table-column label="状态">
                        <el-switch v-model="gm_state" active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" @click="handleClick(scope.row)" icon="el-icon-edit"></el-button>
                            <el-button type="danger" icon="el-icon-delete" @click="del(scope.row.id)"></el-button>
                            <el-button type="warning" icon="el-icon-star-off" @click="xiu(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
                <el-form>
                    <el-input v-model="username" placeholder="请输入用户名"></el-input>
                    <el-input v-model="password" placeholder="请输入密码"></el-input>
                    <el-input v-model="email" placeholder="请输入邮箱"></el-input>
                    <el-input v-model="mobile" placeholder="请输入手机号"></el-input>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="add()">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="修改用户" :visible.sync="dialogFormVisible11">
                <el-form>
                    <el-input v-model="email1" placeholder="请输入修改后的邮箱"></el-input>
                    <el-input v-model="mobile1" placeholder="请输入修改后的手机号"></el-input>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible11 = false">取 消</el-button>
                    <el-button type="primary" @click="add1()">确 定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>
<!-- vue -->
<script>
export default {
    data() {
        return {
            // 声明的属性
            cha: '',
            gm_state: '',
            username: '',
            password: '',
            email: '',
            email1: '',
            mobile: '',
            mobile1: '',
            id: '',
            tableData: [],
            input3: '',
            dialogFormVisible: false,
            dialogFormVisible11: false,
        }
    },
    //生命周期函数
    mounted() {
        this.xuan()
    },
    // 调用方法
    methods: {
        deleteRow(index, rows) {
            rows.splice(index, 1);
        },
        xuan() {
            this.$axios.get('http://shiyansong.cn:8888/api/private/v1/users', {
                params: {
                    pagenum: 1,
                    pagesize: 10,
                    query: this.input3
                },
                headers: {
                    Authorization: localStorage.getItem('token')
                }
            }).then(res => {
                console.log(res);
                this.tableData = res.data.data.users
            })
        },
        add() {
            this.$axios.post('http://shiyansong.cn:8888/api/private/v1/users', {
                username: this.username,
                password: this.password,
                email: this.email,
                mobile: this.mobile
            }, {
                headers: {
                    Authorization: localStorage.getItem('token')
                }
            }).then(res => {
                console.log(res);
                this.dialogFormVisible = false
                let data = res.data
                if (data.meta.status == 201) {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.xuan()
                } else {
                    this.$message({
                        message: '添加失败',
                        type: 'warning'
                    });
                }
                this.username = '';
                this.password = ''
            })
        },
        del(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.$axios.delete('http://shiyansong.cn:8888/api/private/v1/users/' + id, {
                    headers: {
                        Authorization: localStorage.getItem('token')
                    }
                }).then(res => {
                    console.log(res);
                    let data = res.data
                    this.xuan()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });



        },
        xiu(res) {
            this.dialogFormVisible11 = true
            this.email1 = res.email,
                this.mobile1 = res.mobile,
                this.id = res.id
        },
        add1() {
            this.$axios.put('http://shiyansong.cn:8888/api/private/v1/users/' + this.id, {
                email: this.email1,
                mobile: this.mobile1
            }, {
                headers: {
                    Authorization: localStorage.getItem('token')
                }
            }).then(res => {
                console.log(res);
                this.dialogFormVisible11 = false
                let data = res.data
                if (data.meta.status == 200) {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.xuan()
                } else {
                    this.$message({
                        message: '添加失败',
                        type: 'warning'
                    });
                }
            })
        }
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style>
.you {
    width: 100%;
    height: 100%;
}

.you .kad {
    width: 96%;
    margin-left: 20px;
}
</style>